<template>
  <div id="radio">
    <van-nav-bar
      title="心灵电台"
      left-arrow
      :border="false"
      @click-left="returnIndex"
    >
      <template #right>
        <van-icon name="ellipsis" size="22" />
      </template>
    </van-nav-bar>
    <van-tabs
      v-model:active="active"
      @click-tab="onClickTab"
      color="#3C95E9"
      title-active-color="#3C95E9"
      :border="false"
    >
      <van-tab title="全部">
        <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="0"
          >
            <ul>
              <li v-for="item in state.list" :key="item._id">
                <div class="mmm-img">
                  <img :src="item.img" />
                </div>
                <div class="words">
                  <h4>{{ item.title }}</h4>
                  <p class="words-p">
                    主播: <span>{{ item.anchor }}</span> 收听:
                    <span>{{ item.listen }}</span>
                  </p>
                </div>
                <div class="icon-right"></div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="我喜欢的">我喜欢的</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { getXinlingData } from "../../utils/api";
export default {
  setup() {
    const router = useRouter();
    const returnIndex = () => {
      router.go(-1);
    };
    const active = ref(0);
    const onClickTab = ({ title }) => Toast(title);
    //刷新
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      reslist: [], //请求来的数据
    });
    //请求数据
    onMounted(() => {
      getradio();
    });
    const getradio = async () => {
      const a = await getXinlingData();
      state.reslist = a.data.result;
    };

    const onLoad = () => {
      setTimeout(() => {
        if (state.refreshing) {
          state.list = [];
          state.refreshing = false;
        }
        let length = state.list.length;
        for (let i = length; i < length + 8; i++) {
          if (state.reslist.length > 0) {
            state.list.push(state.reslist[i]);
          }
        }
        state.loading = false;

        if (state.list.length >= 24) {
          state.finished = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    return {
      active,
      onClickTab,
      state,
      onLoad,
      onRefresh,
      returnIndex,
    };
  },
};
</script>

<style lang="less">
@import "../../assets/css/var.less";
:root {
  --van-nav-bar-title-text-color: #000000;
}
#radio {
  .van-tabs__content {
    .van-tab__pane {
      ul {
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #f2f2f2;
          height: 85px;
          padding: 0 12px 0 5px;
          .mmm-img {
            width: 81px;
            height: 60px;
            img {
              width: 100%;
            }
          }
          .words {
            margin-left: 4px;
            width: 81px;
            height: 60px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            .words-p {
              color: #a2a2a2;
              font-weight: 500;
            }
          }
          .icon-right {
            width: 22px;
            height: 22px;
            background-image: url("../../assets/img/radio/right2.png");
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}
</style>
